<template>
	<view class="app-mine">
		<view class="banner">
			<image class="photo" :src="dataBase" mode="" @click="chose" v-if="dataBase != ''"></image>
			<image class="photo" src="../../static/photo.png" mode="" @click="chose" v-else></image>
			<view class="info">用户名称: {{ username }}</view>
			<view class="info">账户余额: {{ money }}</view>
		</view>
		<view>
			<view class="mine-panel2">
				<view class="item" @click="address">
					<view class="c1">
						<image class="icon" src="@/static/i1.png" mode=""></image>
					</view>
					<view class="c2">地址管理</view>
					<view class="c3">
						<image class="to" src="@/static/to.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="orders">
					<view class="c1">
						<image class="icon" src="@/static/i2.png" mode=""></image>
					</view>
					<view class="c2">订单</view>
					<view class="c3">
						<image class="to" src="@/static/to.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="cart">
					<view class="c1">
						<image class="icon" src="@/static/i3.png" mode=""></image>
					</view>
					<view class="c2">充值</view>
					<view class="c3">
						<image class="to" src="@/static/to.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="customerService">
					<view class="c1">
						<image class="icon" src="@/static/i3.png" mode=""></image>
					</view>
					<view class="c2">客服</view>
					<view class="c3">
						<image class="to" src="@/static/to.png" mode=""></image>
					</view>
				</view>
				<view class="item" @click="edit">
					<view class="c1">
						<image class="icon" src="@/static/i4.png" mode=""></image>
					</view>
					<view class="c2">修改个人信息</view>
					<view class="c3">
						<image class="to" src="@/static/to.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="full-btn1" @click="gologin" v-if="!token">登录</view>
			<view class="full-btn" @click="logout1" v-else>退出</view>
		</view>
	</view>
</template>

<script>
	import {
		updatePerson,
		moneyPerson,
		getPersonImg
	} from "@/ww.js"
	import {
		log
	} from "util";
	import {
		getwordOrder
	} from "@/tool/index.js"
	import {
		toast
	} from "@/common.js"
	export default {
		data() {
			return {
				token: '',
				username: '',
				dataBase: '',
				money: ''
			};
		},
		onLoad() {
			if (uni.getStorageSync("userInfo")) {
				const userInfo = uni.getStorageSync("userInfo");
				this.username = userInfo.username
			}
			this.token = uni.getStorageSync("token").token
		},
		onShow() {
			if (this.token) {
				this.img111()
				moneyPerson({
					username: uni.getStorageSync("userInfo").username
				}).then(res => {
					this.money = res.data.money.toFixed(2)
				})
			}
		},
		methods: {
			gologin() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			logout1() {
				uni.showModal({
					title: '提示',
					content: '确定退出登录?',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync("token");
							uni.removeStorageSync("userInfo");
							uni.removeStorageSync("imgUrl");
							uni.reLaunch({
								url: '/pages/index/index'
							})
						} else {
							return
						}
					}
				});
			},
			edit() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/mine/userinfo"
					})
				} else {
					this.gologin()
				}
			},
			address() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/mine/address/address"
					})
				} else {
					this.gologin()
				}
			},
			cart() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/mine/recharge/recharge"
					})
				} else {
					this.gologin()
				}
			},
			customerService() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/mine/customerService/customerService"
					})
				} else {
					this.gologin()
				}
			},
			orders() {
				if (this.token) {
					uni.navigateTo({
						url: "/pages/mine/orders/orders"
					})
				} else {
					this.gologin()
				}
			},
			img111() {
				getPersonImg({
					username: uni.getStorageSync("userInfo")
						.username
				}).then(res => {
					let imgUrl = res.data.url
					imgUrl = encodeURIComponent(imgUrl)
					uni.setStorageSync("imgUrl", imgUrl);
					this.dataBase = decodeURIComponent(uni
						.getStorageSync("imgUrl"));
				})
			},
			chose() {
				let that = this
				if (this.token) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						success: function(res) {
							let tempFilePaths = res.tempFilePaths[0]
							uni.uploadFile({
								url: 'http://111.231.22.97:9000/upload',
								filePath: tempFilePaths,
								name: 'file',
								formData: {
									'filename': new Date().getTime().toString() + uni.getStorageSync(
										'userInfo').username,
									'username': uni.getStorageSync('userInfo').username
								},
								success: (uploadFileRes) => {
									if (uploadFileRes.data == 'success') {
										that.img111()
									}
								}
							});
						}
					});
				} else {
					toast('请先登录')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.app-mine {
		height: 100vh;
		overflow-y: auto;
		padding-bottom: 20rpx;
		background: #F1F1F1;
	}

	.app-mine .banner {
		background: #359BFF;
		background-size: 100% auto;
		padding: 50rpx 0 80rpx 220rpx;
		position: relative;
	}

	.app-mine .banner .photo {
		width: 170rpx;
		height: 170rpx;
		position: absolute;
		left: 32rpx;
		top: 40rpx;
		border-radius: 50%;
	}

	.app-mine .banner .name {
		height: 49rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 49rpx;
	}

	.app-mine .banner .info {
		margin-top: 10rpx;
		width: 318rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		font-size: 24rpx;
		background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
		border-radius: 25rpx;
		padding-left: 14rpx;
	}

	.app-mine .banner .star {
		width: 25rpx;
		height: 23rpx;
		margin-right: 10rpx;
	}

	.app-mine .mine-panel {
		margin: 24rpx 32rpx 20rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 8px 8px 1px rgba(178, 178, 178, 0.16);
		border-radius: 20rpx;
		padding: 28rpx 0;
		position: relative;
	}

	.mine-panel .tit {
		width: 128rpx;
		height: 47rpx;
		line-height: 47rpx;
		font-size: 32rpx;
		font-family: Source Han Sans SC-Medium, Source Han Sans SC;
		font-weight: 500;
		color: #333333;
		margin-left: 40rpx;
		position: relative;
	}

	.mine-panel .text {
		position: relative;
		z-index: 5;
	}

	.mine-panel .content {
		display: flex;
		margin-top: 38rpx;
	}

	.mine-panel .content .item {
		flex: 1;
		text-align: center;
	}

	.mine-panel .content .l1 {
		line-height: 46rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN-Bold, Source Han Sans CN;
		font-weight: bold;
		color: #007DFF;
	}

	.mine-panel .content .l2 {
		height: 35rpx;
		font-size: 24rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		margin-top: 14rpx;
	}

	.mine-panel .content .icon {
		width: 56rpx;
		height: 56rpx;
	}

	.app-mine .mine-panel2 {
		margin: 24rpx 32rpx 20rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 8px 8px 1px rgba(178, 178, 178, 0.16);
		border-radius: 20rpx;
	}

	.mine-panel2 .item {
		display: flex;
		align-items: center;
		padding: 34rpx 0;
		height: 110rpx;
	}

	.mine-panel2 .item .c1 {
		width: 107rpx
	}

	.mine-panel2 .item .c2 {
		flex: 1;
	}

	.mine-panel2 .item .c3 {
		width: 45rpx;
	}

	.mine-panel2 .item .icon {
		width: 52rpx;
		height: 52rpx;
		margin-left: 32rpx;
		margin-top: 10rpx;
	}

	.mine-panel2 .item .to {
		width: 16rpx;
		height: 24rpx;
	}


	.full-btn {
		margin: 24rpx 32rpx 20rpx 32rpx;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: linear-gradient(306deg, #FF6D58 0%, #FF4931 100%);
		border-radius: 16rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
		font-weight: normal;
		color: #FFFFFF;
	}

	.full-btn1 {
		margin: 24rpx 32rpx 20rpx 32rpx;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background: skyblue;
		border-radius: 16rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
		font-weight: normal;
		color: #FFFFFF;
	}
</style>